He tenido un problema con "display: flex;" para ubicar la parte "crear una publicación" al lado de la barra de menú lateral (Inicio, Perfil, etc.), pero parece "display: flex;" no funciona y se encuentra en posición vertical en su lugar. He estado pensando que es porque estoy usando div de manera incorrecta o debido al enrutador de reacción V6. ¿Alguien puede ayudar a ubicarlo horizontalmente? Gracias.
Mis códigos y la imagen del resultado es la siguiente.
Aplicación.js
import React from "react"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import LoginHeader from "./LoginHeader.js"; import { Outlet } from "react-router"; import Login from "./Login.js"; import RegisterHeader from "./RegisterHeader.js"; import Register from "./Register.js"; import HomeHeader from "./HomeHeader.js"; import Sidebar from "./Sidebar.js"; import Post from "./Post.js"; import News from "./News.js"; function App() { return ( <Router> <div className="App"> <Routes> <Route path = "/" element = {<LoginHeader />} /> </Routes> <Routes> <Route path = "/" element = {<Login />} /> </Routes> <Routes> <Route path = "/register" element = {<RegisterHeader />} /> </Routes> <Routes> <Route path = "/register" element = {<Register />} /> </Routes> <Routes> <Route path = "/home" element = {<HomeHeader />} /> </Routes> <Routes> <Route path = "/home" element = {<div className = "appBody"> <Sidebar /> </div>} /> </Routes> <Routes> <Route path = "/home" element = {<div className = "homePosts"> <Post /> </div>} /> </Routes> <Routes> <Route path = "/home" element = {<News />} /> </Routes> </div> </Router> ); } export default App;Aplicación.css
.appBody { display: flex; } .homePosts { display: flex; justify-content: center; }Importe el archivo App.css en App.js o el archivo raíz index.js.
Así, si el archivo css está en la misma carpeta
import './App.css';Está sucediendo debido a la propiedad div y flex colocada incorrectamente, actualice su código de esta manera, funcionará.
<div className="App"> <Routes> <Route path="/" element={<h1>Login Header</h1>} /> </Routes> <Routes> <Route path="/" element={<h2>Login</h2>} /> </Routes> <Routes> <Route path="/register" element={<h3>Register Header</h3>} /> </Routes> <Routes> <Route path="/register" element={<h4>Register</h4>} /> </Routes> <Routes> <Route path="/home" element={<h5>HomeHeader</h5>} /> </Routes> <div className="container"> <Routes> <Route path="/home" element={<h6>Sidebar</h6>} /> </Routes> <div className="appBody"> <Routes> <Route path="/home" element={ <div className="homePosts"> <p>Post</p> </div> } /> </Routes> <Routes> <Route path="/home" element={<i>News</i>} /> </Routes> </div> </div> </div> </Router> .container { display: flex; } .appBody { display: flex; flex: 1; } .homePosts { display: flex; justify-content: center; flex: 1; }